<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			var currentMarker = null;
			
			function handlePointClick(event) {
				if(currentMarker == null) {
					document.getElementById('lat').value = event.latLng.lat();
					document.getElementById('lng').value = event.latLng.lng();

					currentMarker = new google.maps.Marker({
						position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
					});
									
					map.addOverlay(currentMarker);

					dlg.show();
				}	
			}

			function markerAddComplete() {
				var title = document.getElementById('title');
				currentMarker.setTitle(title.value);
				title.value = "";

				currentMarker = null;
				dlg.hide();
			}

			function cancel() {
				dlg.hide();
				currentMarker.setMap(null);
				currentMarker = null;

				return false;
			}
		</script>
		
		<style type="text/css">
			.yui-skin-sam .yui-panel .bd{
				background: #333333;
				border-color: #000000;
				color:#CCCCCC;
			}
			
			.yui-skin-sam .yui-panel .hd {  
			    background: url(../images/dialoghd.gif);
			    border-color : #000000;
			    color: #FFFFFF;
			} 
			
			.yui-skin-sam .yui-panel-container.shadow .underlay {
				background-color: #333333;
				bottom:-7px;
				left: 7px;
				opacity:0.5;
				position:absolute;
				right:-7px;
				top:7px;
			}
			
			.yui-skin-sam .container-close {
				background: url(../images/dialogclose.png) no-repeat;
			}
		</style>
	</ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">GMap - Adding Markers</h1>
		<div class="entry">
			<p>This examples demonstrates how to add a marker and keep client side representation in sync with the server side model. Even though you use Google Maps as a JSF component
			you can still take advantage of the full Google Maps API.</p>

			<p:growl id="messages" showDetail="true" />

			<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px"
				model="#{mapBean.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" />
				
			<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">
				<h:form prependId="false">
					<h:panelGrid columns="2">
						<h:outputLabel for="title" value="Title:" />
						<p:inputText id="title" value="#{mapBean.title}" />
						
						<f:facet name="footer">
							<p:commandButton value="Add" actionListener="#{mapBean.addMarker}" update=":messages" oncomplete="markerAddComplete()"/>
							<p:commandButton value="Cancel" onclick="return cancel()"/>
						</f:facet>
					</h:panelGrid>
					
					<h:inputHidden id="lat" value="#{mapBean.lat}" />
					<h:inputHidden id="lng" value="#{mapBean.lng}" />
				</h:form>
			</p:dialog>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="gmapAddMarker.xhtml">
					<pre name="code" class="xml">
&lt;p:growl id="messages" showDetail="true" /&gt;

&lt;p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" 
	style="width:600px;height:400px"
	model="\#{mapBean.emptyModel}" 
	onPointClick="handlePointClick(event);" 
	widgetVar="map" /&gt;
	
&lt;p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true"&gt;
	&lt;h:form prependId="false"&gt;
		&lt;h:panelGrid columns="2"&gt;
			&lt;h:outputLabel for="title" value="Title:" /&gt;
			&lt;p:inputText id="title" value="\#{mapBean.title}" /&gt;
			
			&lt;f:facet name="footer"&gt;
				&lt;p:commandButton value="Add" 
						actionListener="\#{mapBean.addMarker}" 
						update="messages" 
						oncomplete="markerAddComplete()"/&gt;
				&lt;p:commandButton value="Cancel" onclick="return cancel()"/&gt;
			&lt;/f:facet&gt;
		&lt;/h:panelGrid&gt;
		
		&lt;h:inputHidden id="lat" value="\#{mapBean.lat}" /&gt;
		&lt;h:inputHidden id="lng" value="\#{mapBean.lng}" /&gt;
	&lt;/h:form&gt;
&lt;/p:dialog&gt;

&lt;script type="text/javascript"&gt;
	var currentMarker = null;
	
	function handlePointClick(event) {
		if(currentMarker == null) {
			document.getElementById('lat').value = event.latLng.lat();
			document.getElementById('lng').value = event.latLng.lng();

			currentMarker = new google.maps.Marker({
				position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
			});
							
			map.addOverlay(currentMarker);

			dlg.show();
		}	
	}

	function markerAddComplete() {
		var title = document.getElementById('title');
		currentMarker.setTitle(title.value);
		title.value = "";

		currentMarker = null;
		dlg.hide();
	}

	function cancel() {
		dlg.hide();
		currentMarker.setMap(null);
		currentMarker = null;

		return false;
	}
&lt;/script&gt;
					</pre>
				</p:tab>
				
				<p:tab title="MapBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;

public class MapBean implements Serializable {

	private MapModel emptyModel;
	
	private String title;
	
	private double lat;
	
	private double lng;

	public MapBean() {
		emptyModel = new DefaultMapModel();
	}
	
	public MapModel getEmptyModel() {
		return emptyModel;
	}
	
	public void addMessage(FacesMessage message) {
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
	
	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public double getLat() {
		return lat;
	}

	public void setLat(double lat) {
		this.lat = lat;
	}

	public double getLng() {
		return lng;
	}

	public void setLng(double lng) {
		this.lng = lng;
	}
	
	public void addMarker(ActionEvent actionEvent) {
		Marker marker = new Marker(new LatLng(lat, lng), title);
		emptyModel.addOverlay(marker);
		
		addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));
	}

}
					</pre>
				</p:tab>
			</p:tabView>
			
												
		</div>
	</ui:define>
</ui:composition>